import React, { useEffect } from 'react';
import { observer } from 'mobx-react';
import { Link } from 'react-router-dom';
import BookStore from '../stores/BookDataStore';
 
const Blog = observer(() => {
    useEffect(() => {
        BookStore.fetchBooks();
        // const timer = setInterval(() => {
        //     BookStore.fetchBooks();
        // }, 5000);
        // return () => {
        //     clearInterval(timer);
        // }

    }, []) 
    if(BookStore.isLoading){
        return <h1>加载中...</h1>
    }
    if(BookStore.error){
        return <h1>加载失败:{BookStore.error}</h1>
    }
    
    return(
    <div className = 'booklist'>
        <Link to="/">
            <button>主页</button>
        </Link>

        <h1>书籍列表</h1>
            <ul>
                {BookStore.books.map(books =>(
                <li key={books.id}>
                    <Link to={`/AboutBook/${books.id}`}>
                        {books.id}{books.name}
                    </Link>
                </li>
                ))}
            </ul>
    </div>);
});

export default Blog;
